<template>
  <view class="con">
    <!-- 头部 -->
    <view class="top flex flex_between">
      <view class="topz flex">
        <!-- 未授权登录 -->
        <image class="topz_img" v-if="isLogin===1" src="/static/mine/nologin.png"></image>
        <!-- 已授权登录 -->
        <image class="topz_img" v-if="isLogin===2" :src="userInfo.avatarUrl"></image>
        <!-- 未授权登录 -->
        <view class="topzc" v-if="isLogin===1" @click="toLogin">
          <view class="topzc_v1">还没登录哦</view>
          <view class="topzc_v2 flex">
            <view class="weideng">点击登录/注册</view>
          </view>
        </view>
        <!-- 未授权登录 -->
        <view class="topzc" v-if="isLogin===2">
          <view class="topzc_v1">{{userInfo.nickName || ''}}</view>
          <view class="topzc_v2 flex">
            <image class="topzc_v2_img" mode="widthFix" :src="userInfo.lv_ico"></image>
            <view class="topzc_v2_v">{{userInfo.nicknum}}</view>
          </view>
        </view>
        <!-- <button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhone">授权手机号并登录</button> -->
      </view>
      <view class="topy flex">
        <view hover-class="none" @click="goInvite">
          <image class="topy_img" src="/static/mine/img04.png" mode="widthFix"></image>
        </view>

        <view @click="goSet">
          <image class="topy_img" src="/static/mine/img05.png" mode="widthFix"></image>
        </view>
      </view>
    </view>
    <!-- 中间内容 -->
    <view class="main">
      <view class="main_t flex flex_between">
        <view class="main_tz flex">
          <image class="main_tz_img" src="/static/mine/img06.png" mode="widthFix"></image>
          <!-- <view class="main_tz_c">尊贵的{{userInfo.lv || ''}}{{userInfo.lv_name || ''}}合伙人</view> -->
          <view class="main_tz_c" v-if="isLogin===1">尊贵的陌上未来</view>
          <view class="main_tz_c" v-if="isLogin===2">尊贵的陌上未来{{userInfo.lv || ''}}{{userInfo.lv_name || ''}}
          </view>
        </view>
        <view @click="goEquity" hover-class="none" class="main_tY">查看权益</view>
      </view>
      <view class="main_c">
        <view class="main_c1 flex flex_between">
          <view class="main_c1_t">
            <view class="main_c1_tv1">总收益(元)</view>
            <view class="main_c1_tv2" v-if="isLogin===1"></view>
            <view class="main_c1_tv2" v-if="isLogin===2">{{userInfo.money_all}}</view>
          </view>
          <view @click="goWallet" class="main_c1_y">
            <image class="main_c1_y_img" src="/static/mine/img07.png" mode="widthFix"></image>
            <text class="main_c1_y_t">包包</text>
          </view>
        </view>
        <view class="main_c2 flex flex_between">
          <view class="main_c2li">
            <view class="main_c2li_v1">可结算(元)</view>
            <view class="main_c2li_v2" v-if="isLogin===1"></view>
            <view class="main_c2li_v2" v-if="isLogin===2">{{userInfo.money}}</view>
          </view>
          <view class="main_c2li">
            <view class="main_c2li_v1">今日预估(元)</view>
            <view class="main_c2li_v2" v-if="isLogin===1"></view>
            <view class="main_c2li_v2" v-if="isLogin===2">{{money_day}}</view>
          </view>
          <view class="main_c2li">
            <view class="main_c2li_v1">本月预估(元)</view>
            <view class="main_c2li_v2" v-if="isLogin===1"></view>
            <view class="main_c2li_v2" v-if="isLogin===2">{{money_month}}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 导航列表 -->
    <view class="navList flex flex_between">
      <view @click="goTeam" hover-class="none" class="navListli">
        <image class="navListli_img" src="/static/mine/img08.png" mode="widthFix"></image>
        <view class="navListli_t">我的团队</view>
      </view>
      <view @click="goInvite" class="navListli">
        <image class="navListli_img" src="/static/mine/img09.png" mode="widthFix"></image>
        <view class="navListli_t">邀请好友</view>
      </view>
      <view @click="goRevenueDetails" class="navListli">
        <image class="navListli_img" src="/static/mine/img10.png" mode="widthFix"></image>
        <view class="navListli_t">我的收益</view>
      </view>
      <view @click="goCourse" class="navListli">
        <image class="navListli_img" src="/static/mine/img11.png" mode="widthFix"></image>
        <view class="navListli_t">我的课程</view>
      </view>
    </view>
    <!-- <view class="navList flex flex_between"> -->
      <!-- <view @click="goCrossBorder" class="navListli">
        <image class="navListli_img" src="/static/mine/img30.png" mode="widthFix"></image>
        <view class="navListli_t">我的跨境</view>
      </view> -->
     <!-- <view @click="goSubsidy" class="navListli">
        <image class="navListli_img" src="/static/mine/img31.png" mode="widthFix"></image>
        <view class="navListli_t">我的补贴</view>
      </view> -->
      <!-- <view @click="goMyAddress" class="navListli">
        <image class="navListli_img" src="/static/mine/img32.png" mode="widthFix"></image>
        <view class="navListli_t">我的地址</view>
      </view> -->
	   <!-- <view @click="goMyGoogThing" class="navListli">
	     <image class="navListli_img" src="/static/mine/img32.png" mode="widthFix"></image>
	     <view class="navListli_t">我的好物</view>
	   </view> -->
      <!-- <view @click="goMyProductOperation" class="navListli">
        <image class="navListli_img" src="/static/mine/img33.png" mode="widthFix"></image>
        <view class="navListli_t">我的运营</view>
      </view> -->
    <!-- </view> -->
    <!-- <view class="navList flex">
      <view @click="goMyHuDan" class="navListli">
        <image class="navListli_img" src="/static/mine/img36.png" mode="widthFix"></image>
        <view class="navListli_t">我的互单</view>
      </view>
      <view @click="goMyHuiDan" class="navListli">
        <image class="navListli_img" src="/static/mine/img37.png" mode="widthFix"></image>
        <view class="navListli_t">我的回单</view>
      </view>
    </view> -->
    <!-- 列表 -->
    <view class="mlist">
      <navigator hover-class="none" url="/packageA/mine/questions?type=gg" class="mlistli flex flex_between">
        <view class="mlistliz fl">官方公告</view>
        <image class="mlistliy fr" src="/static/jiant.png" mode="widthFix"></image>
      </navigator>
      <navigator hover-class="none" url="/packageA/mine/questions?type=wt" class="mlistli flex flex_between">
        <view class="mlistliz fl">常见问题</view>
        <image class="mlistliy fr" src="/static/jiant.png" mode="widthFix"></image>
      </navigator>
<!--      <view class="mlistli flex flex_between">
        <view class="mlistliz fl">外部链接</view>
        <image class="mlistliy fr" src="/static/jiant.png" mode="widthFix"></image>
      </view> -->
      <!-- 			<navigator hover-class="none" url="/packageA/mine/questions?type=guiZe" class="mlistli flex flex_between">
				<view class="mlistliz fl">平台规则</view>
				<image class="mlistliy fr" src="/static/jiant.png" mode="widthFix"></image>
			</navigator>
			<navigator hover-class="none" url="/packageA/mine/questions?type=jianYi" class="mlistli flex flex_between">
				<view class="mlistliz fl">投诉建议</view>
				<image class="mlistliy fr" src="/static/jiant.png" mode="widthFix"></image>
			</navigator> -->
    </view>
    <!-- 未登录的时候--点击获取昵称，头像 -->
    <view class="zhezhao" v-if="isShow_init1" @click="hideTan"></view>


    <view class="tan tan_init1" v-if="isShow_init1">
      <view class="tan_title">欢迎加入陌上未来</view>
      <view class="tan_t flex">
        <view class="">
          <view class="newxin">
            <view class="newxin_1">感谢您信任并使用陌上未来</view>
            <view class="newxin_2">我们深知个人信息的重要性，我们将按法律法规采取相应保护措施，尽力保护您的信息安全。在使用前，请仔细阅读并理解:</view>
            <view class="newxin_2">
              我们会根据您使用服务的具体功能需要，收集必要的用户信息。为了更好地保障您的个人权益，请您认真阅读<text>《陌上未来用户注册服务协议》</text>和<text>《陌上未来小程序隐私保护指引》</text>，了解我们收集、使用、存储、分享个人信息的情况，以及对您个人信息的安全保护措施
            </view>
            <view class="newxin_2">如您理解并接受上述内容，请点击“同意”开始接受我们的服务</view>
          </view>
        </view>

      </view>
      <view class="tan_b flex flex_between">
        <view class="tan_b_d1" @click="goinit2">拒绝</view>
        <!-- <button open-type="getUserInfo" class="tan_b_d2" @click="toLogin">同意</button> -->
        <button class="tan_b_d2">同意</button>
        <!--        <button class="tan_b_d2" v-if="canUseGetUserProfile" @click="toLogin">同意</button>
        <button class="tan_b_d2" v-else open-type="getUserInfo" bindgetuserinfo="getUserInfo">同意</button> -->
      </view>
    </view>

    <!-- 未登录的时候--点击获取昵称，头像 -->
    <view class="zhezhao" v-if="isShowLoginTan" @click="hideTan"></view>
    <view class="logint" v-if="isShowLoginTan">
      <!-- <image class="logint1" src="/static/mine/img28.png" mode="widthFix"></image>
      <view class="logint2">点击获取昵称</view>
      <view class="logint3">登录/注册</view> -->
      <!-- 头像 -->
      <view class="pictrue">
        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <image class="avatar" :src="userInfo.avatarUrl?userInfo.avatarUrl:'/static/mine/img28.png'"></image>
        </button>
      </view>
      <!-- 昵称 -->
      <input type="nickname" class="nicheng" placeholder="请设置昵称" maxlength="10" v-model="userInfo.nickName"
        @change="onChooseName" />
      <view class="logint_btn" @click="loginBtn">登录/注册</view>
      <view class="logint_di flex">
        <view class="logint_diWrap flex" @click="agreeBtn">
          <view class="logint_di1" :class="isAgree?'':'huise'">
            <image class="logint_di1_img" v-if="isAgree" src="/static/mine/img29.png" mode="widthFix">
            </image>
          </view>
          <view class="logint_diWrapc">您已同意</view>
        </view>
        <view class="logint_di2"><text @click="goIndexDetail('fwxy','用户服务协议')">《用户服务协议》</text>和<text
            @click="goIndexDetail('ysxy','隐私保护声明')">《隐私保护声明》</text></view>
      </view>
    </view>

  </view>
</template>

<script>
  import {
    getOpenid, //获取openid
    otherSavepic, //上传图片
    getLoginUser, //获取(添加)用户信息
    getUserUpdate //修改用户信息
  } from '@/request/api.js'
  export default {
    data() {
      return {
        codeGetOpenid: uni.getStorageSync('codeGetOpenid'), //获取code---用于请求后端接口-获取openid'
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        isLogin: uni.getStorageSync('isLogin') || 1, //是否登录授权 1是未授权；2是已授权
        isShow_init1: false, //未授权-点击后的弹窗
        isShowLoginTan: false,
        userInfo: uni.getStorageSync('userInfo'), //授权后的信息
        isLogout: uni.getStorageSync('isLogout') || 1, //是否退出状态
        money_day: 0, //今日预估
        money_month: 0, //本月预估
        isAgree: false //是否同意
      }
    },
    onLoad() {
      console.log('防止刚进入app没有获取到openid，再次获取')

    },
    onShow() {
      // console.log('ggggggggggggggg')
      // console.log(uni.getStorageSync('isLogout'))
      // console.log(uni.getStorageSync('userInfo'))
      // console.log(this.userInfo)
      this.isLogin = uni.getStorageSync('isLogin') || 1
      this.userInfo = uni.getStorageSync('userInfo') || {}
      console.log('微信授权后的用户信息')
      console.log(this.userInfo)
      this.getOpenid();
      if (this.openid) {
        console.log('走了吗')
        this.getLoginUserFun() //获取用户信息--通过接口
      }
    },
    methods: {
      getOpenid() {
        if (uni.getStorageSync('openid')) {
          console.log('不用再去获取openid了')
          return
        }
        console.log('进入页面获取的code')
        console.log(this.codeGetOpenid)
        let param = {
          js_code: this.codeGetOpenid
        }
        getOpenid(param).then(res => {
          console.log('获取openid----通过后端接口')
          console.log(res)
          console.log(res.openid)
          console.log(res.session_key)
          uni.setStorageSync('openid', res.openid)
          uni.setStorageSync('session_key', res.session_key)
        })
        // let openId = ''
        // let that = this
        // console.log('通过腾讯接口获取openid')
        // uni.login({
        //   provider: 'weixin',
        //   success: res => {
        //     //code值(5分钟失效)
        //     let code = res.code;
        //     //小程序appid
        //     let appid = 'wxb4a2f0381c8e1cb8'; //小程序id
        //     //小程序secret
        //     let secret = '770987c23faafd7cafed3c380b0039ec'; //密钥
        //     //wx接口路径
        //     let url = 'https://api.weixin.qq.com/sns/jscode2session';
        //     uni.request({
        //       url: url, // 请求路径
        //       data: {
        //         appid: appid,
        //         secret: secret,
        //         js_code: code,
        //         grant_type: 'authorization_code'
        //       }, // 请求体
        //       method: 'GET', //请求方法,
        //       header: {}, //请求头
        //       success: result => {
        //         console.log('获取openid')
        //         console.log(result)
        //         uni.setStorageSync('openid', result.data.openid)
        //         uni.setStorageSync('session_key', result.data.session_key)
        //         that.$forceUpdate()
        //         that.openid = result.data.openid
        //       },
        //       fail: err => {
        //       } //失败
        //     });
        //   }
        // })
      },

      // 没有授权登录的时候---点击出现弹框
      noLoginBtn() {
        // this.isShow_init1 = true
      },

      agreeBtn() {
        this.isAgree = !this.isAgree
      },

      // 跳转"服务协议","隐私政策"
      goIndexDetail(tag, title) {
        uni.navigateTo({
          url: "/packageA/index/detail?tag=" + tag + '&title=' + title
        })
      },
      // 上传头像
      onChooseAvatar(e) {
        console.log('选择的微信头像')
        console.log(e)
        let that = this
        uni.uploadFile({
          url: 'https://moshangweilai.herobing.com/other/savepic', //上传接口地址
          name: 'pic', //后端接收的文件参数名
          filePath: e.detail.avatarUrl, //要上传的文件路径
          formData: {},
          header: {
            "Content-Type": "multipart/form-data"
          },
          success: (uploadFileRes) => {
            console.log('后端返回的图片')
            let res = JSON.parse(uploadFileRes.data)
            console.log(res);
            console.log(that.userInfo)
            // if(that.userInfo.avatarUrl){
            //   that.userInfo.avatarUrl = res.data.pic
            //   uni.setStorageSync('userInfo', this.userInfo); //存用户信息
            //   that.$forceUpdate()
            // }
            that.userInfo.avatarUrl = res.data.pic
            uni.setStorageSync('userInfo', this.userInfo); //存用户信息
            that.$forceUpdate()

          },
        })

      },
      // 获取昵称
      onChooseName(e) {
        if (this.userInfo.nickName) {
          this.userInfo.nickName = e.detail.value;
          uni.setStorageSync('userInfo', this.userInfo); //存用户信息
          this.$forceUpdate()
        }
      },

      loginBtn() {
        console.log('昵称是。。。。')
        console.log(this.userInfo.nickName)
        let that = this
        if (!this.isAgree) {
          uni.showToast({
            icon: 'none',
            title: '请先阅读协议并确认同意'
          })
          return
        }
        if (this.userInfo.nickName === '' || this.userInfo.nickName === 'undefined' || !this.userInfo.nickName ||
          this.userInfo.nickName === undefined || this.userInfo.nickName === 'null' || this.userInfo.nickName ===
          null) {
          uni.showToast({
            icon: 'none',
            title: '请先获取昵称'
          })
        } else {
          // 修改昵称
          getUserUpdate(this.openid, 'nikename', this.userInfo.nickName).then(res => {})
          // 修改头像
          getUserUpdate(this.openid, 'head', this.userInfo.avatarUrl).then(res => {})
          uni.setStorageSync('userInfo', this.userInfo); //存用户信息
          uni.setStorageSync('isLogin', 2); //存登录状态，若为2，则是登录状态
          this.isShowLoginTan = false
          setTimeout(function() {
            that.reload()
          }, 500)
        }
      },

      toLogin() {
        console.log('this.userInfo')
        console.log(this.userInfo)
        if (this.userInfo.avatarUrl && this.userInfo.nickName) {
          this.isLogin = 2
          uni.setStorageSync('isLogin', 2); //存登录状态，若为2，则是登录状态
          this.$forceUpdate()
        } else {
          this.isShow_init1 = false
          this.isShowLoginTan = true
        }
        // this.isShow_init1 = false
        // this.isShowLoginTan = true
      },


      // 点击同意--弹出微信授权头像、昵称组件
      // toLogin() {
      //   let that = this
      //   uni.getUserProfile({
      //     desc: '获取用户信息',
      //     success: (res) => {
      //       console.log(res);
      //       console.log('授权成功');
      //       uni.showToast({
      //         icon:'none',
      //         title:res.userInfo.nickName
      //       })
      //       const {
      //         userInfo: {
      //           avatarUrl,
      //           nickName
      //         }
      //       } = res; //取出userInfo中avatarUrl和nickName的值
      //       const userInfo = {
      //         avatarUrl,
      //         nickName
      //       }
      //       that.isShow_init1 = false
      //       uni.setStorageSync('userInfo', userInfo); //存用户信息
      //       uni.setStorageSync('isLogin', 2); //存登录状态，若为2，则是登录状态
      //       setTimeout(function() {
      //         that.reload()
      //       }, 500)
      //     },
      //     fail: (err) => {
      //       if (err.errCode === 'fail auth deny') {
      //         // 用户拒绝授权
      //         console.log('用户拒绝了授权请求');
      //         uni.setStorageSync('login', 1); //未登录
      //         // 这里可以执行用户拒绝授权后的逻辑，比如提示用户或者引导用户去设置中开启权限等
      //       } else {
      //         // 其他错误处理
      //         uni.setStorageSync('login', 1); //未登录
      //         console.log('获取用户信息失败', err);
      //       }
      //     }
      //   })
      // },

      // 获取用户信息--通过接口
      getLoginUserFun() {
        let that = this
        getLoginUser({
          openid: this.openid,
          pid: uni.getStorageSync('pid') || ''
        }).then(res => {
          console.log('获取(添加)用户信息')
          console.log(res)
          if (res.error_code === 0) {
            this.money_day = res.data.money_day
            this.money_month = res.data.money_month
            // 如果通过后端接口获取的用户信息有数据,则把头像和昵称更新一下
            that.userInfo = res.data
            if (res.data.head) {
              that.userInfo.avatarUrl = res.data.head
            }
            if (res.data.nikename) {
              that.userInfo.nickName = res.data.nikename
            }
            uni.setStorageSync('userInfo', that.userInfo);
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },

      goinit2() {
        this.isShow_init1 = false
      },

      hideTan() {
        this.isShow_init1 = this.isShowLoginTan = false
        // this.isLogin = 2
      },

      // 点击-邀请-判断是否登录
      goInvite() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/invite'
          })
        }
      },

      // 点击进去设置页面-如果没有登录-就提示他让他先登录
      goSet() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/set'
          })
        }
      },

      // 点击"查看权益"页面-如果没有登录-就提示他让他先登录
      goEquity() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/equity'
          })
        }
      },

      // 点击"钱包"页面-如果没有登录-就提示他让他先登录
      goWallet() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/wallet'
          })
        }
      },

      // 点击"我的团队"--进入“我的团队”页面--如果未登录，需要先提示：未登录，先进行授权登录
      goTeam() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/team'
          })
        }
      },

      // 点击"我的收益"页面-如果没有登录-就提示他让他先登录
      goRevenueDetails() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/revenueDetails'
          })
        }
      },

      // 点击"我的课程"页面-如果没有登录-就提示他让他先登录
      goCourse() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/course'
          })
        }
      },

      // 点击"我的跨境"页面-如果没有登录-就提示他让他先登录
      goCrossBorder() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/crossBorder'
          })
          // uni.showToast({
          // 	icon: 'none',
          // 	title: '小技术正在快马加鞭'
          // })
        }
      },

      // 点击"我的补贴"页面-如果没有登录-就提示他让他先登录
      goSubsidy() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/subsidy'
          })
        }
      },
	  
	  
	  // 我的好物
	  goMyGoogThing() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/goodThing'
          })
        }
      },

      // 点击"我的地址"页面-如果没有登录-就提示他让他先登录
      goMyAddress() {
        // if (this.isLogin === 1) {
        //   uni.showToast({
        //     icon: 'none',
        //     title: '未登录，先进行授权登录'
        //   })
        // } else {
        //   uni.navigateTo({
        //     url: '/packageA/index/address'
        //   })
        // }
        uni.showToast({
          icon: 'none',
          title: '暂停应用'
        })
      },

      // 点击"我的运营"页面-如果没有登录-就提示他让他先登录
      goMyProductOperation() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/mine/myProductOperation'
          })
        }
      },
      
      // 进入我的互单
      goMyHuDan() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/index/woDeHuDan'
          })
        }
      },
      
      // 进入我的互单
      goMyHuiDan() {
        if (this.isLogin === 1) {
          uni.showToast({
            icon: 'none',
            title: '未登录，先进行授权登录'
          })
        } else {
          uni.navigateTo({
            url: '/packageA/index/woDeHuiDan'
          })
        }
      },



      // 重新刷新页面
      reload() {
        const pages = getCurrentPages()
        // 声明一个pages使用getCurrentPages方法
        const curPage = pages[pages.length - 1]
        // 声明一个当前页面
        curPage.onLoad(curPage.options) // 传入参数
        curPage.onShow()
        curPage.onReady()
      }
    }
  }
</script>

<style scoped lang="scss">
  .con {
    background: url('/static/mine/img01.png') no-repeat 340rpx -174rpx;
    background-size: 348rpx 348rpx;
    background-color: #EEEEEE;
    padding: 30rpx;
    .top {
      width: 100%;
      height: auto;
      padding: 0 0;
      box-sizing: border-box;
      margin: 40rpx 0;
      align-items: normal;
      margin-top: 20rpx;

      .topz_img {
        width: 130rpx;
        height: 130rpx;
        border-radius: 50%;
        margin-right: 30rpx;
      }

      .topzc {
        line-height: initial;

        .topzc_v1 {
          color: rgba(16, 16, 16, 1);
          font-size: 40rpx;
          height: 56rpx;
          // line-height: 56rpx;
          margin-bottom: 12rpx;
        }

        .topzc_v2 {
          border-radius: 40rpx;
          background-color: rgba(249, 191, 65, 1);

          .topzc_v2_img {
            width: 104rpx;
            height: 40rpx;
            border-radius: 40rpx 0px 0px 40rpx;
          }

          .topzc_v2_v {
            padding: 0 14rpx;
            padding-right: 20rpx;
            height: 40rpx;
            color: rgba(16, 16, 16, 1);
            font-size: 28rpx;
            line-height: 40rpx;
            border-radius: 0px 40px 40px 0px;
            background-color: rgba(249, 191, 65, 1);
            font-family: 'AvantGardeFont';
          }

          .weideng {
            color: rgba(16, 16, 16, 1);
            font-size: 24rpx;
            width: 100%;
            text-align: center;
            padding: 2px 10rpx;
            ;
          }
        }
      }

      .topy {
        align-items: normal;
        margin-top: 17rpx;
        margin-right: 20rpx;

        .topy_img {
          width: 48rpx;
          height: auto;
          margin-left: 40rpx;

        }
      }
    }

    .main {
      width: 100%;
      height: auto;

      .main_t {
        width: 100%;
        border-radius: 20rpx 20rpx 0px 0px;
        background-color: rgba(249, 191, 65, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        height: 110rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        padding-bottom: 20rpx;

        .main_tz {
          .main_tz_img {
            width: 52rpx;
            height: auto;
            margin-right: 12rpx;
          }

          .main_tz_c {
            color: rgba(16, 16, 16, 1);
            font-size: 28rpx;
          }
        }

        .main_tY {
          color: rgba(0, 0, 0, 1);
          font-size: 28rpx;
          height: 95rpx;
          line-height: 95rpx;
        }
      }

      .main_c {
        width: 100%;
        height: auto;
        background: #fff;
        border-radius: 20rpx;
        margin-top: -20rpx;
        padding: 0 30rpx;
        box-sizing: border-box;

        .main_c1 {
          padding-top: 34rpx;
          align-items: normal;

          .main_c1_t {
            .main_c1_tv1 {
              height: 40rpx;
              line-height: 40rpx;
              color: rgba(16, 16, 16, 1);
              font-size: 28rpx;
              margin-bottom: 6rpx;
            }

            .main_c1_tv2 {
              height: 58rpx;
              line-height: 58rpx;
              color: rgba(16, 16, 16, 1);
              font-size: 48rpx;
              font-family: 'AvantGardeFont';
            }
          }

          .main_c1_y {
            width: 160rpx;
            height: 52rpx;
            border-radius: 40rpx;
            background-color: rgba(0, 0, 0, 1);
            text-align: center;
            line-height: 52rpx;
            text-align: center;

            .main_c1_y_img {
              width: 32rpx;
              height: auto;
              position: relative;
              top: 6rpx;
            }

            .main_c1_y_t {
              color: rgba(255, 255, 255, 1);
              font-size: 28rpx;
              margin-left: 6rpx;
            }
          }
        }

        .main_c2 {
          margin-top: 40rpx;
          padding-bottom: 30rpx;

          .main_c2li {
            width: 200rpx;
            height: 112rpx;
            border-radius: 10rpx;
            background-color: rgba(238, 238, 238, 1);

            .main_c2li_v1 {
              margin-left: 20rpx;
              color: rgba(137, 137, 137, 1);
              font-size: 24rpx;
              height: 34rpx;
              line-height: 34rpx;
              margin-top: 22rpx;
            }

            .main_c2li_v2 {
              margin-left: 20rpx;
              color: rgba(16, 16, 16, 1);
              font-size: 28rpx;
              font-family: 'AvantGardeFont';
            }
          }
        }
      }
    }

    .navList {
      width: 100%;
      height: 140rpx;
      border-radius: 20rpx;
      background-color: rgba(255, 255, 255, 1);
      margin: 30rpx 0;

      .navListli {
        width: 25%;
        text-align: center;

        .navListli_img {
          width: 48rpx;
          height: auto;
        }

        .navListli_t {
          height: 40rpx;
          line-height: 40rpx;
          color: rgba(16, 16, 16, 1);
          font-size: 28rpx;
        }
      }
    }

    .mlist {
      width: 100%;
      height: auto;

      .mlistli {
        width: 100%;
        height: 104rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 1);
        padding: 0 30rpx;
        box-sizing: border-box;
        margin-bottom: 30rpx;
        font-size: 28rpx;
        padding-left: 34rpx;

        .mlistliz {}

        .mlistliy {
          width: 24rpx;
          height: auto;
        }
      }
    }
  }

  .logint {
    width: 100%;
    height: 680rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    background: #fff;
    text-align: center;
    border-radius: 20rpx 20rpx 0px 0px;

    .pictrue {
      width: 140rpx;
      height: 140rpx;
      margin: 0 auto;
      margin-top: 88rpx;
      margin-bottom: 50rpx;

      .avatar {
        width: 140rpx;
        height: 140rpx;
        border-radius: 100%;
      }
    }

    .nicheng {
      width: 680rpx;
      height: 92rpx;
      border-radius: 100rpx;
      background-color: rgba(232, 230, 230, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      margin: 0 auto;
      margin-bottom: 48rpx;
    }

    .logint_btn {
      width: 680rpx;
      height: 92rpx;
      line-height: 92rpx;
      border-radius: 100rpx;
      background-color: rgba(249, 191, 65, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      margin: 0 auto;
      margin-bottom: 48rpx;
    }
  }

  button {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent;
  }

  button::after {
    border: none !important;
  }

  .logint_di {
    width: 100%;
    height: auto;
    justify-content: center;

    .logint_diWrapc {
      color: rgba(16, 16, 16, 1);
      font-size: 24rpx;
    }

    .logint_di1 {
      width: 24rpx;
      height: 24rpx;
      background-color: rgba(249, 191, 65, 1);
      text-align: center;
      line-height: 24rpx;
      border-radius: 100%;
      margin-right: 12rpx;

      .logint_di1_img {
        width: 20rpx;
        height: auto;
        position: relative;
        top: -3rpx;
      }
    }

    .logint_di1.huise {
      background-color: rgba(211, 211, 211, 1);
    }

    .logint_di2 {
      color: rgba(16, 16, 16, 1);
      font-size: 24rpx;

      text {
        font-weight: bold;
      }
    }
  }

  .newxin {
    width: 560rpx;
    height: auto;
    border-radius: 20rpx;
    background-color: rgba(238, 238, 238, 1);
    padding: 24rpx;
    box-sizing: border-box;

    .newxin_1 {
      line-height: 36rpx;
      color: rgba(16, 16, 16, 1);
      font-size: 24rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .newxin_2 {
      line-height: 36rpx;
      color: rgba(16, 16, 16, 1);
      font-size: 24rpx;
      margin-bottom: 20rpx;

      text {
        font-weight: bold;
      }
    }
  }

  .tan.tan_init1 {
    margin-top: -457rpx;
  }
</style>